<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>目标页面</title>

    <style>
        body {
            font-size: 14px;
            margin: 0;
            padding: 0;
        }
        .result-container {
            width: 90%;
            max-width: 800px;
            margin: 20px auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f7f7f7;
            width: 100%;
            box-sizing: border-box;
        }
        .result h2 {
            font-size: 16px;
            margin-bottom: 10px;
        }
        .result pre {
            white-space: pre-wrap;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            box-sizing: border-box;
        }
        table th, table td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: left;
        }
        table th {
            background-color: #f7f7f7;
        }
        .table-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<h1>目标页面</h1>

<div class="result-container">
    <div class="result" id="result">
        <h2>解析结果：</h2>
        <pre><code></code></pre>
    </div>

    <div class="table-container" id="depth-table"></div>
    <div class="table-container" id="completion-rate-table"></div>
    <div class="table-container" id="participation-rate-table"></div>
</div>

<script>
    // 解析URL查询参数中的数据
    const params = new URLSearchParams(window.location.search)
    const decodedData = decodeURIComponent(params.get('data'));
    const data = JSON.parse(decodedData);

    // 用于生成表格的数据结构
    const depthArray = [];
    const completionRateArray = [];
    const participationRateArray = [];

    // 提取需要的信息，生成三个带有teachername和key/value信息的对象数组
    for (let [teacherName, map] of data.entries()) {
        if (map.has('深度')) {
            depthArray.push({
                teacherName,
                depth: map.get('深度')
            });
        }
        if (map.has('完课率')) {
            completionRateArray.push({
                teacherName,
                completionRate: map.get('完课率')
            });
        }
        if (map.has('参与率')) {
            participationRateArray.push({
                teacherName,
                participationRate: map.get('参与率')
            });
        }
    }

    // 创建并填充表格
    function createTable(tableData, title, tableContainerId) {
        const tableContainer = document.getElementById(tableContainerId);
        const tableTitle = document.createElement('h2');
        tableTitle.classList.add('table-title');
        tableTitle.innerText = title;

        const table = document.createElement('table');

        // 添加表头
        const thead = document.createElement('thead');
        const tr = document.createElement('tr');
        const th1 = document.createElement('th');
        th1.innerText = '老师';
        tr.appendChild(th1);
        const th2 = document.createElement('th');
        th2.innerText = title;
        tr.appendChild(th2);
        thead.appendChild(tr);
        table.appendChild(thead);

        // 添加表内容
        const tbody = document.createElement('tbody');
        for (let {teacherName, value} of tableData) {
            const tr = document.createElement('tr');
            const td1 = document.createElement('td');
            td1.innerText = teacherName;
            tr.appendChild(td1);
            const td2 = document.createElement('td');
            td2.innerText = value;
            tr.appendChild(td2);
            tbody.appendChild(tr);
        }
        table.appendChild(tbody);

        tableContainer.appendChild(tableTitle);
        tableContainer.appendChild(table);
    }

    // 生成三个表格
    createTable(depthArray, '深度', 'depth-table');
    createTable(completionRateArray, '完课率', 'completion-rate-table');
    createTable(participationRateArray, '参与率', 'participation-rate-table');
</script>
</body>
</html>